<template>
    <div class="main">
        <div class="content1">
            <div class="left">
                <div>
                    <el-input v-model="input" placeholder="请输入代理商查询"></el-input>
                </div>
                <el-button type="primary">查询</el-button>
            </div>
        </div>
        <div class="content2">
            <div class="left">
                <div class="top"><span>代理商区域</span><span>代理商</span></div>
                <div class="tree">
                    <div class="tree1"><qu-yu></qu-yu></div>
                    <div class="tree2">
                        <span v-for="(item,index) in form" @click="dailishan(index)" :class="{bg:show[index].show}">{{item.name}}</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    层级结构：
                </div>
                <div class="cengjitu">
                    <div class="img">
                        <img class="img1" src="../../../../../assets/u4680_seg0.png" alt="">
                        <img class="img2" src="../../../../../assets/u4680_seg1.png" alt="">
                        <img class="img3" src="../../../../../assets/u4680_seg2.png" alt="">
                    </div>
                    <div class="imgg">
                        <img class="img1" src="../../../../../assets/u4680_seg0.png" alt="">
                        <img class="img2" src="../../../../../assets/u4680_seg1.png" alt="">
                        <img class="img3" src="../../../../../assets/u4680_seg2.png" alt="">
                    </div>
                    <div class="imggg">
                        <img class="img1" src="../../../../../assets/u4680_seg0.png" alt="">
                        <img class="img2" src="../../../../../assets/u4680_seg1.png" alt="">
                        <img class="img3" src="../../../../../assets/u4680_seg2.png" alt="">
                    </div>
                    <div :class="item.class1" v-for="(item,index) in btnform">
                        <el-button @click="css(index)" size="medium" :type="item.btntype">{{item.name}}</el-button>
                        <div :class="item.class2"><span v-if="item.btntype === 'info'">开启层级</span><span v-else>关闭层级</span></div>
                    </div>
                </div>
            </div>
        </div>

        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span class="alertnote">{{content}}</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import quYu from './quyu'
    import $ from 'jquery'
    export default {
        name: "index",
        components:{
            'quYu': quYu,
        },
        data() {
            return{
                dialogVisible: false,
                input:'',
                btnform:[{class1:'btn1',class2:'note1',btntype:'primary',name:'代理商'},{class1:'btn2',class2:'note2',btntype:'primary',name:'集团'},
                    {class1:'btn3',class2:'note3',btntype:'info',name:'品牌'},{class1:'btn4',class2:'note4',btntype:'primary',name:'门店'}],
                title:'提示',
                content:'',
                options:'',
                value:'',
                multipleSelection: [],
                form: [{'name':'代理商一','key':1},{'name':'代理商二','key':1},{'name':'代理商三','key':1}],
                show:[{show:true},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}],

            }
        },
        created(){

        },
        methods:{
            dailishan(index) {
                this.show=[{show:false},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}]
                this.show[index].show = true
            },
            css(index) {
                this.dialogVisible = true

                if (this.btnform[index].btntype === 'primary') {
                    this.content = '确定关闭集团组织层级？'
                    this.btnform[index].btntype = 'info'
                }else {
                    this.content = '确定开启集团组织层级？'
                    this.btnform[index].btntype = 'primary'
                }
                if (index === 0){

                }else if(index === 1){

                }else if(index === 2){

                }else if(index === 3){

                }

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        }
    }

</script>

<style lang="less" scoped>
    .alertnote{font-size: 20px;font-weight: bold;display: block;text-align: center}
    .bg{background: #fffece}
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .content1{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 10px;
            .left{
                display: flex;
                flex-direction: row;
                margin-right: 10px;
                padding-right: 10px;
                div{margin-right: 10px}
            }
        }
        .content2 {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .left{
                width: 400px;
                height: 100%;
                display: flex;
                border-right: 1px solid #dedede;
                flex-direction: column;
                .top{
                    width: 400px;
                    height: 36px;
                    background: #dedede;

                    line-height: 36px;
                    font-size: 14px;
                    span{
                        width: 200px;
                        height: 36px;
                        display: block;
                        float: left;
                        text-align: center;
                    }
                }
                .tree{
                    width: 400px;
                    display: flex;
                    flex-direction: row;
                    flex: 1;
                    background: #ffffff;
                    div{
                        flex: 1;
                    }
                    .tree2{
                        border-left: 1px solid #dedede;
                        span{
                            width: 200px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            display: block;
                            color:#606266;
                            border-bottom: 1px solid #dedede;
                            cursor: pointer;
                        }
                    }
                }
            }
            .right{
                flex: 1;
                display: flex;
                flex-direction: column;
                .top{
                    text-align: left;
                    padding: 6px;
                    background: #ffffff;
                }
                .cengjitu{
                    flex: 1;
                    padding: 20px;
                    border: 1px solid #dedede;
                    border-left: 0px;
                    background: #ffffff;
                    position: relative;
                    .img{
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        .img1{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img2{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img3{
                            position: absolute;
                            top: 109px;
                            left: 5px;
                        }
                    }
                    .imgg{
                        position: absolute;
                        top: 89px;
                        left: 60px;
                        .img1{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img2{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img3{
                            position: absolute;
                            top: 109px;
                            left: 5px;
                        }
                    }
                    .imggg{
                        position: absolute;
                        top: 178px;
                        left: 120px;
                        .img1{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img2{
                            position: absolute;
                            top: 20px;
                            left: 5px;
                        }
                        .img3{
                            position: absolute;
                            top: 109px;
                            left: 5px;
                        }
                    }
                    .btn1{
                        position: absolute;
                        top: 10px;
                        left: 20px;
                        .note1{
                            width: 100px;
                            color: rgba(22, 155, 213, 1);
                            position: absolute;
                            top:6px;
                            left: 90px;
                            display: none;

                        }
                    }
                    .btn2{
                        position: absolute;
                        top: 96px;
                        left: 79px;
                        .note2{
                            width: 100px;
                            color: rgba(22, 155, 213, 1);
                            position: absolute;
                            top:6px;
                            left: 80px;
                            display: none;
                        }
                    }
                    .btn3{
                        position: absolute;
                        top: 184px;
                        left: 139px;
                        .note3{
                            width: 100px;
                            color: rgba(22, 155, 213, 1);
                            position: absolute;
                            top:6px;
                            left: 80px;
                            display: none;
                        }
                    }
                    .btn4{
                        position: absolute;
                        top: 276px;
                        left: 199px;
                        .note4{
                            width: 100px;
                            color: rgba(22, 155, 213, 1);
                            position: absolute;
                            top:6px;
                            left: 80px;
                            display: none;
                        }
                    }
                    .btn1:hover{ .note1{display: block} }
                    .btn2:hover{ .note2{display: block} }
                    .btn3:hover{ .note3{display: block} }
                    .btn4:hover{ .note4{display: block} }
                    }
            }
        }
    }
</style>
